<template>
  <view style="position: relative">
    <view class="navigation_bg">
      <view class="navigation">
        <view class="navigation_back" @tap="backref()">
          <uni-icons type="back" size="24" color="#fff"></uni-icons>
        </view>
        <view class="navigation_title"> 我的店铺 </view>
      </view>
    </view>
    <view class="good_con">
      <view class="good_tabs" style="margin-top: 20px">
        <view
          class="good_tab"
          v-for="(item, index) in goodTab"
          :key="index"
          :class="goodType == item.type ? 'active' : ''"
          @tap="changeTab(item)"
        >
          {{ item.name }}
          <view class="good_tab_line"> </view>
        </view>
      </view>

      <view class="good_con_detail">
        <view class="good_con_aside">
          <view
            class="good_aside_tab"
            v-for="(item, index) in typeList"
            :class="item.id == typeId ? 'active' : ''"
            @click="selectType(index)"
            :key="index"
          >
            {{ item.name }}
            <!-- <view class="good_aside_tab_num" v-if="item.num != 0">
							{{item.num}}
						</view> -->
          </view>
        </view>
        <view class="good_con_list">
          <!-- <view class="good_con_list_title">
						{{typeName}}
					</view> -->
          <view
            class="good_con_item"
            style="border: 1px solid #f3f3f3; padding: 4px"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <view class="good_con_item_img">
              <image
                v-if="item.goodsImg"
                :src="domain + item.goodsImg"
                mode=""
              ></image>
            </view>
            <view class="good_con_item_info">
              <view class="good_con_item_title">
                {{ item.name }}
              </view>
              <view class="good_con_item_price"> ¥{{ item.price }} </view>
              <view class="good_con_item_nums">
                <button type="default" @click="toDetail(item)">编辑</button>
              </view>
            </view>
          </view>
        </view>

        <view
          class="good_con_merchant"
          style="display: flex; justify-content: space-around"
        >
          <view class="" @tap="toDetail()">
            <button
              style="background-color: rgba(255, 141, 26, 1)"
              type="primary"
            >
              新增产品
            </button>
          </view>
          <view class="" @tap="toTypeDetail()">
            <button
              style="background-color: rgba(255, 141, 26, 1)"
              type="primary"
            >
              编辑分类
            </button>
          </view>
        </view>
      </view>
    </view>
    <tabBar current="2"></tabBar>
  </view>
</template>

<script>
import { getStoreType, getStoreTypePro } from "../../api/api.js";
import server_url from "../../api/config.js";
export default {
  data() {
    return {
      domain: server_url,
      storeId: "",
      goodType: 1,
      // goodTab: [
      // 	{
      // 		name: '点餐',
      // 		type: 1
      // 	}
      // 	// {
      // 	// 	name: '评价',
      // 	// 	type: 2
      // 	// },
      // 	// {
      // 	// 	name: '商家',
      // 	// 	type: 3
      // 	// }
      // ],

      star: 5,

      typeId: 1,
      typeName: "麻辣水煮",
      typeList: [],
      goodsList: [],

      evaluateType: "",
      evaluateTypes: [
        {
          name: "全部",
          active: true,
          type: "",
          number: null,
        },
        {
          name: "好评",
          active: false,
          type: 1,
          number: 23,
        },
        {
          name: "中评",
          active: false,
          type: 2,
          number: 0,
        },
        {
          name: "差评",
          active: false,
          type: 3,
          number: 1,
        },
      ],

      commentList: [],
    };
  },
  methods: {
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    changeTab(item) {
      this.goodType = item.type;
    },

    toDetail(data) {
      let id = "";
      if (data) {
        id = data.id;
      }
      uni.navigateTo({
        url: "/pages/shop/checkout?id=" + id,
      });
    },
    toTypeDetail() {
      uni.navigateTo({
        url: "/pages/shop/type",
      });
    },
    getType() {
      getStoreType().then((res) => {
        this.typeList = res.data;
        if (this.typeList && this.typeList.length) {
          this.getGoods(this.typeList[0]);
        }
      });
    },
    selectType(index) {
      this.getGoods(this.typeList[index]);
    },
    getGoods(item) {
      this.typeId = item.id;
      getStoreTypePro({
        // businessId: this.storeId,
        categotyId: item.id,
      }).then((res) => {
        this.goodsList = res.data;
      });
    },
  },
  onShow() {
    this.getType();
  },
};
</script>

<style lang="scss">
::v-deep uni-swiper .uni-swiper-dot {
  background-color: rgba(255, 255, 255, 0.5);
  width: 48rpx;
  height: 6rpx;
  border-radius: 0;
}

::v-deep uni-swiper .uni-swiper-dot-active {
  background-color: #2588ff;
}

.type-enter-active {
  animation: inventory 0.2s linear;
}

.type-leave-active {
  animation: inventory 0.2s linear reverse;
}

@keyframes inventory {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.navigation_bg {
  height: 360rpx;
  width: 100%;
  // background: url('../../static/image/shop/detailBg.png') no-repeat;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );

  background-size: cover;
}

.navigation {
  width: 100%;
  height: 160rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: absolute;
  z-index: 2;

  .navigation_back {
    position: absolute;
    top: 60rpx;
  }

  .navigation_title {
    color: #fff;
    font-size: 36rpx;
  }
}

.good_con {
  padding: 0 24rpx;
  padding-bottom: 180rpx;

  .good_info {
    padding: 26rpx 28rpx;
    border-radius: 12rpx;
    // background-color: #fff;
    margin-top: -140rpx;
    box-shadow: 0px 4px 8px rgba(37, 136, 255, 0.06);

    .good_info_hd {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .good_info_msg {
        width: 75%;

        .good_info_title {
          font-size: 36rpx;
          font-weight: 700;
          color: #2e343a;
        }

        .good_info_brief {
          color: #9098a0;
          font-size: 24rpx;
        }
      }

      .good_info_img {
        width: 120rpx;
        height: 120rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }
      }
    }

    .good_info_notice {
      image {
        width: 28rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }

      text {
        font-size: 24rpx;
        color: #9098a0;
      }
    }
  }

  .good_tabs {
    display: flex;
    margin-top: 56rpx;

    .good_tab {
      margin-right: 80rpx;
      position: relative;
      font-size: 32rpx;
      color: #2e343a;
      font-weight: 500;

      &.active {
        .good_tab_line {
          display: block;
        }
      }

      .good_tab_line {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rpx;
        background-color: #2588ff;
      }
    }
  }

  .good_con_detail {
    margin-top: 20rpx;
    padding-bottom: 200rpx;
    display: flex;

    .good_con_aside {
      width: 20%;

      .good_aside_tab {
        color: #9098a0;
        font-size: 28rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &.active {
          color: #333;
          font-weight: 700;
        }

        .good_aside_tab_num {
          position: absolute;
          top: -15rpx;
          right: 8rpx;
          border: 2rpx solid #fff;
          background-color: #ffb226;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }
      }
    }

    .good_con_list {
      width: 80%;
      padding-top: 20rpx;
      padding-left: 20rpx;

      .good_con_list_title {
        color: #969696;
        font-weight: bolder;
      }

      .good_con_item {
        position: relative;
        display: flex;
        margin-top: 20rpx;

        .good_con_item_img {
          flex-shrink: 0;

          image {
            width: 162rpx;
            height: 162rpx;
            border-radius: 12rpx;
          }
        }

        .good_con_item_info {
          margin-left: 32rpx;

          .good_con_item_title {
            color: #2e343a;
            font-size: 28rpx;
            font-weight: 700;
          }

          .good_con_item_price {
            color: #ff2626;
            font-size: 32rpx;
            margin-top: 60rpx;
          }
        }

        .good_con_item_type {
          position: absolute;
          bottom: 10rpx;
          right: 0;
          width: 86rpx;
          height: 40rpx;
          background-color: #2588ff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          color: #ffffff;
          border-radius: 40rpx;

          .good_con_item_type_num {
            position: absolute;
            top: -35rpx;
            right: 8rpx;
            border: 2rpx solid #fff;
            background-color: #ffb226;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .good_con_item_nums {
          position: absolute;
          bottom: 0;
          right: 0;
          display: flex;
          align-items: center;

          .good_con_item_dec {
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }

          .good_con_item_num {
            margin: 0 16rpx;
            font-size: 28rpx;
            color: #2e343a;
            margin-top: -10rpx;
          }

          .good_con_item_add {
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
      }
    }

    .good_con_merchant {
      position: fixed;
      bottom: 70px;
      left: 0;
      z-index: 5;
      width: 100%;
      height: 200rpx;
      background-color: #fff;
      // padding: 0 24rpx;
      display: flex;
      align-items: center;

      .good_con_mer_checkout {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;
        border-radius: 100rpx;
        background-color: #3a3635;
        padding-left: 140rpx;
        padding-right: 60rpx;

        .good_merchant_distribute {
          font-size: 28rpx;

          .merchant_price {
            color: #fff;
          }

          text {
            color: #999999;
          }
        }

        .good_merchant_min {
          color: #999999;
          font-size: 28rpx;
        }

        .good_con_shop_car {
          position: absolute;
          left: 0;
          top: -18rpx;

          image {
            width: 90rpx;
            height: 120rpx;
          }

          .good_con_shopcar_num {
            position: absolute;
            top: 0;
            right: -18rpx;
            border: 2rpx solid #fff;
            background-color: #2288ff;
            color: #fff;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .good_merchant_checkout {
        position: absolute;
        right: 0;
        width: 192rpx;
        height: 100rpx;
        background-color: #2588ff;
        border-top-right-radius: 200rpx;
        border-bottom-right-radius: 200rpx;
        font-size: 30rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .good_con_evaluate {
    margin-top: 20rpx;
    padding-bottom: 200rpx;

    .good_con_score {
      display: flex;
      align-items: center;

      .score_num {
        font-size: 80rpx;
        color: #2588ff;
        font-weight: bolder;
      }

      .score_right {
        margin-left: 20rpx;

        .score_stars {
          display: flex;

          image {
            width: 16rpx;
            height: 16rpx;
            margin-right: 8rpx;
          }
        }

        .score_type_num {
          color: #9098a0;
          font-size: 24rpx;
        }
      }
    }

    .evaluate_types {
      display: flex;
      align-items: center;
      margin-top: 15rpx;

      .evaluate_type {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #2e343a;
        font-weight: 500;
        margin-right: 30rpx;
        width: 130rpx;
        height: 56rpx;
        border-radius: 56rpx;

        &.active {
          background-color: #2588ff;
          color: #fff;
        }
      }
    }

    .evaluate_comments {
      margin-top: 30rpx;

      .evaluate_comment {
        margin-bottom: 20rpx;

        .comment_hd {
          position: relative;
          display: flex;
          align-items: center;

          .comment_attr {
            image {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
            }
          }

          .comment_info {
            margin-left: 16rpx;

            .comment_name {
              font-size: 28rpx;
              color: #2e343a;
              font-weight: 500;
            }

            .comment_stars {
              display: flex;
              margin-top: 10rpx;

              image {
                width: 16rpx;
                height: 16rpx;
                margin-right: 8rpx;
              }
            }
          }

          .comment_time {
            position: absolute;
            right: 0;
            font-size: 24rpx;
            color: #9098a0;
          }
        }

        .comment_bd {
          .comment_content {
            font-size: 30rpx;
            color: #2e343a;
            text-align: justify;
          }

          .comment_imgs {
            display: flex;
            margin-top: 24rpx;

            image {
              width: 200rpx;
              height: 200rpx;
              border-radius: 12rpx;
              margin-right: 16rpx;
            }
          }
        }

        .comment_bt {
          margin-top: 24rpx;
          padding: 16rpx;
          font-size: 26rpx;
          color: #2e343a;
          background-color: #f9fbfc;
        }
      }
    }
  }

  .good_shop_info {
    margin-top: 20rpx;

    .good_shop_info_title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 700;
    }

    .good_shop_swiper {
      margin-top: 24rpx;
      width: 100%;
      height: 260rpx;

      .swiper {
        height: 260rpx;
      }

      .swiper-item {
        width: 100%;
        height: 260rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .good_shop_info_list {
      margin-top: 24rpx;
      background-color: #f9fbfc;
      padding: 24rpx;
      border-radius: 12rpx;

      .good_shop_info_item {
        position: relative;
        display: flex;
        margin-bottom: 24rpx;

        .good_shop_info_icon {
          margin-right: 18rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        text {
          font-size: 28rpx;
          color: #2e343a;
        }

        .call_phone {
          position: absolute;
          right: 24rpx;
          font-size: 24rpx;
          color: #2288ff;
          font-weight: 500;
        }
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

.good_type {
  position: fixed;
  bottom: 200rpx;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: #fff;
  padding: 28rpx 24rpx;
  border-radius: 16rpx 16rpx 0 0;

  .good_type_close {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
  }

  .good_type_select {
    font-size: 24rpx;
    color: #2e343a;
  }

  .good_type_info {
    display: flex;
    margin-top: 30rpx;

    .good_type_info_img {
      image {
        width: 162rpx;
        height: 162rpx;
        border-radius: 12rpx;
      }
    }

    .good_type_info_msg {
      margin-left: 32rpx;

      .good_type_info_name {
        color: #2e343a;
        font-size: 32rpx;
        font-weight: 700;
      }

      .good_type_info_price {
        font-size: 32rpx;
        color: #ff2626;
        font-weight: 700;
        margin-top: 60rpx;
      }
    }
  }

  .good_type_num_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .good_type_label {
      font-size: 24rpx;
      color: #2e343a;
    }

    .good_types_nums {
      display: flex;
      align-items: center;

      .good_con_item_dec {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .good_con_item_num {
        margin: 0 16rpx;
        font-size: 28rpx;
        color: #2e343a;
        margin-top: -10rpx;
      }

      .good_con_item_add {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .good_type_item {
    margin-top: 20rpx;

    .good_type_label {
      font-size: 28rpx;
      color: #2e343a;
    }

    .good_type_list {
      margin-top: 12rpx;
      display: flex;
      flex-wrap: wrap;

      .good_type_item {
        margin-right: 16rpx;
        width: 152rpx;
        height: 56rpx;
        border-radius: 56rpx;
        background-color: #f9fbfd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #2e343a;

        &.active {
          background-color: #2588ff;
          color: #fff;
        }
      }
    }
  }
}

.good_cartList {
  position: fixed;
  bottom: 200rpx;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;

  .cartList_hd {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cartList_hd_title {
      font-size: 24rpx;
      color: #2e343a;
    }

    .cartList_clear {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #2e343a;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 4rpx;
      }
    }
  }

  .carList_bd {
    .cartList_item {
      position: relative;
      margin-top: 20rpx;
      display: flex;

      .cartList_item_img {
        image {
          width: 162rpx;
          height: 162rpx;
          border-radius: 12rpx;
        }
      }

      .cartList_item_info {
        margin-left: 24rpx;

        .cartList_item_title {
          font-size: 28rpx;
          color: #2e343a;
          font-weight: 700;
        }

        .cartList_item_tags {
          font-size: 24rpx;
          color: #9098a0;
          margin-top: 10rpx;
        }

        .carList_item_price {
          font-size: 32rpx;
          color: #ff2626;
          margin-top: 30rpx;
        }
      }

      .good_types_nums {
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;

        .good_con_item_dec {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }

        .good_con_item_num {
          margin: 0 16rpx;
          font-size: 28rpx;
          color: #2e343a;
          margin-top: -10rpx;
        }

        .good_con_item_add {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
</style>
